<template>
  <!-- 主页 -->
  <div class="ad-box">
    <div class="ad-title">
      <strong>用户管理页广告</strong>
    </div>
    <div class="ad-list">
      <div class="adInfo">
        <div class="el-upload">
          <el-tooltip effect="dark" :content="this.imageUrl1==''?'点击添加广告1':'点击替换广告1'" placement="bottom">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload1">

              <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
        <div class="el-upload">
          <el-tooltip effect="dark" :content="this.imageUrl2==''?'点击添加广告2':'点击替换广告2'" placement="bottom">
            <!--          点击该区域，进行“上传”或“修改”头像-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload2">

              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
        <div class="el-upload">
          <el-tooltip effect="dark" :content="this.imageUrl3==''?'点击添加广告3':'点击替换广告3'" placement="bottom">
            <!--          点击该区域，进行“上传”或“修改”头像-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload3">

              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
        <div class="el-upload">
          <el-tooltip effect="dark" :content="this.imageUrl4==''?'点击添加广告4':'点击替换广告4'" placement="bottom">
            <!--          点击该区域，进行“上传”或“修改”头像-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload4">

              <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
        <div class="el-upload">
          <el-tooltip effect="dark" :content="this.imageUrl5==''?'点击添加广告5':'点击替换广告5'" placement="bottom">
            <!--          点击该区域，进行“上传”或“修改”头像-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload5">

              <img v-if="imageUrl5" :src="imageUrl5" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
        <div class="el-upload el-upload-end">
          <el-tooltip effect="dark" :content="this.imageUrl6==''?'点击添加广告6':'点击替换广告6'" placement="bottom">
            <!--          点击该区域，进行“上传”或“修改”头像-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload6">

              <img v-if="imageUrl6" :src="imageUrl6" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "AdminADOfUserAdminPage",
        data() {
            return {
                imageUrl1:'',
                imageUrl2:'',
                imageUrl3:'',
                imageUrl4:'',
                imageUrl5:'',
                imageUrl6:'',
                baseURL:"http://localhost:8081/adminPage/addAdvertisement/",
                baseURL2:"http://localhost:8081/adminPage/getADPhoto/",
            };
        },
        mounted(){
            this.axios.post(this.baseURL2+'userAdminPage').then(res=>{
                if (res.data==false){
                    // this.$message.error('操作失败');
                }else {
                    this.imageUrl1 = res.data[0].advertisementAddr
                    this.imageUrl2 = res.data[1].advertisementAddr
                    this.imageUrl3 = res.data[2].advertisementAddr
                    this.imageUrl4 = res.data[3].advertisementAddr
                    this.imageUrl5 = res.data[4].advertisementAddr
                    this.imageUrl6 = res.data[5].advertisementAddr
                }
            }).catch(
                exception=>{
                    console.log(exception)
                }
            )
        },
        methods: {
            beforeAvatarUpload1(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+1,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl1 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            beforeAvatarUpload2(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+2,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl2 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            beforeAvatarUpload3(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+3,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl3 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            beforeAvatarUpload4(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+4,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl4 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            beforeAvatarUpload5(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+5,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl5 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
            beforeAvatarUpload6(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传广告图片只能是 JPG 格式');
                } else if (!isLt2M) {
                    this.$message.error('上传广告图片大小不能超过 2MB');
                } else {
                    let forms = new FormData()
                    let configs = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };
                    forms.append('file',file)
                    this.axios.post(this.baseURL+'userAdminPage'+'/'+6,forms ,configs).then(res=>{
                        if (res.data==false){
                            this.$message.error('操作失败');
                        }else {
                            this.imageUrl6 = res.data
                            this.$message.success('广告图片上传成功');
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }
            },
        }
    }
</script>

<style scoped>
  .ad-box{
    width: 100%;
    min-height: 230px;
    border-radius: 3px;
    /*border-radius: 6px;*/
    background-color: rgb(255, 255, 255);
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 30px;
    /* transition: 0.3s; */
  }
  .ad-title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: rgb(110, 110, 110);
    /*border-bottom: 1px solid rgb(202, 202, 202);*/
  }
  .ad-title strong{
    margin-left: 20px;
  }
  .ad-list{
    width: 90.7%;
    min-height: 170px;
    margin: 10px auto;
    border-radius: 3px;
    /*border-radius: 6px;*/
    border: 1px solid rgb(235, 235, 235);
    transition: 0.3s;
  }
  .ad-list:hover{
    box-shadow: 0 0 5px rgb(218, 218, 218);
    transform:translateY(-1.3px);
  }
  .adInfo{
    max-width: 96%;
    min-height: 147px;
    margin-top: 10px;
    margin-left: 20px;
    border-radius: 3px;
    /*border-radius: 5px;*/
    /*background-color: #ffe6e8;*/
    background-color: #fafafa;
  }

  .el-upload {
    width: 15.6%;
    height: 145px;
    float: left;
    border: 1px dashed #d6d6d6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #fbfdff;
    margin-right: 1%;
  }
  .el-upload-end{
    margin-right: 0px;
  }
  .el-upload:hover {
    border-color: #00968b;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 145px;
    height: 145px;
    line-height: 145px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>
